<!--
 * @Description: 
 * @Author: william
 * @Date: 2025-09-18 16:18:33
 * @LastEditors: william
 * @LastEditTime: 2025-11-05 20:50:18
-->
<template>
  <view class="nw-picker-container" @click="handleSelect">
    <view
      :class="['input-text', text || selectText ? '' : 'input-placeholder']"
    >
      {{ text || selectText || '选择' }}
    </view>
    <nw-Icons :type="modelShow ? 'up' : 'down'" />
  </view>

  <nw-ActionSheet
    v-if="modelShow"
    ref="uwActionSheetRef"
    v-model="modelValue"
    v-model:show="modelShow"
    :columns="columnsList"
    @change="e => emit('change', e)"
    @close="emit('close')"
    @cancel="emit('cancel')"
    @confirm="handleConfirm"
  >
    <template #toolbar-bottom>
      <view id="actionSheet-search">
        <nw-Input
          v-model="filterValue"
          placeholder="选择项过滤"
          :maxlength="10"
          style="max-width: 300rpx; margin-right: 20rpx"
        ></nw-Input>
      </view>
    </template>
  </nw-ActionSheet>
</template>

<script setup>
defineOptions({
  name: 'PickerSelect',
  inheritAttrs: false
})

const props = defineProps({
  text: {
    type: String,
    default: ''
  },
  columns: {
    type: Array,
    default: () => []
  }
})
const modelValue = defineModel({
  type: Array,
  default: () => []
})
const emit = defineEmits(['select', 'change', 'close', 'cancel', 'confirm'])
const uwActionSheetRef = ref(null)
const modelShow = ref(false)
const filterValue = ref('')

const columnsList = computed(() => {
  const list = props.columns[0].filter(item => {
    return (
      !filterValue.value ||
      item.label.includes(filterValue.value) ||
      filterValue.value.includes(item.label)
    )
  })
  return list ? [list] : []
})

const selectText = computed(() => {
  return (
    props.columns[0].find(item => item.value === modelValue.value[0])?.label ||
    ''
  )
})

const handleSelect = () => {
  modelShow.value = true
  emit('select')
}

const handleConfirm = e => {
  emit('confirm', e)
}

defineExpose({
  uwActionSheetRef
})
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';

.nw-picker-container {
  max-width: 108rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 32rpx;
  min-height: 32rpx;
  padding: 0 10rpx;
  background-color: var(--body-theme);
  box-sizing: border-box;
  .input-text {
    font-size: 18rpx;
    font-weight: 400;
    color: var(--color-333);
    @extend .oneEllipsis;
    &.input-placeholder {
      color: var(--color-999);
    }
  }
  .uni-icons {
    font-size: 18rpx !important;
    font-weight: 400;
    color: var(--color-666) !important;
  }
}

#actionSheet-search {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: calc(100% - 100px);
  width: 60%;
  height: 34px;
  margin: -38px auto 0;
  box-sizing: border-box;
}
</style>
